<script setup>
import {useCartStore} from "@/store/cart.js";
import {request} from "@/util/request.js";
import {useUserStore} from "@/store/user.js";
import {ref} from 'vue'
import {useRouter} from 'vue-router'

const cartStore = useCartStore()
const userStore = useUserStore()
const dialogVisible = ref(false)
const router = useRouter()

function order() {
    dialogVisible.value = true
}

function handleClose() {

}

function handleOrder() {
    let data = {
        totalAmount: cartStore.total,
        products: cartStore.products
    }
    request.post('/order/place', data, {
        headers: {
            "token": userStore.token,
            // "content-type":
            // responseType: 'arraybuffer'
        },
        responseType: 'arraybuffer'
    }).then(res => {
        console.log(res)
        dialogVisible.value = false
        const blob = new Blob([res], {type: 'image/png'});

        // Create a URL for the Blob
        const imageUrl = URL.createObjectURL(blob);
        cartStore.setUrl(imageUrl)
        router.push('/cashier')
    })

}
</script>

<template>
    <!--下单-->
    <!--TODO 构建订单详情展示-->
    <el-row>核对订单信息</el-row>
    <el-row>
        <el-button @click="order">提交订单</el-button>
    </el-row>

    <el-dialog
        v-model="dialogVisible"
        title="Tips"
        width="30%"
        :before-close="handleClose"
    >
        <span>确认付款吗？</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleOrder">立即支付</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style scoped>

</style>